<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">
    
    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">Area Chart</h1>
        <div class="entry">
            <p>BubbleChart is created with a BubbleChartModel.</p>

            <p:bubbleChart value="#{chartBean.bubbleModel}" xaxisLabel="Price" yaxisLabel="Sales"
                        title="Sample Bubble Chart" style="width:400px;height:300px" />
            <br/>
            <br/>
            <p:bubbleChart value="#{chartBean.bubbleModel}"  bubbleGradients="true" shadow="false" showLabels="false" bubbleAlpha="100"
                        title="Custom Bubble Chart" style="width:400px;height:300px" xaxisAngle="-50" yaxisAngle="50" />
            
            <h3>Source</h3>
            <p:tabView>
                <p:tab title="bubbleChart.xhtml">
                    <pre name="code" class="xml">
&lt;p:bubbleChart value="\#{chartBean.bubbleModel}" xaxisLabel="Price" yaxisLabel="Labels"
                title="Sample Bubble Chart" style="width:400px;height:300px" /&gt;

&lt;p:bubbleChart value="\#{chartBean.bubbleModel}" shadow="false" bubbleGradients="true" showLabels="false" bubbleAlpha="100"
                title="Custom Options" style="width:400px;height:300px" xaxisAngle="-50" yaxisAngle="50"/&gt;
                    </pre>
                </p:tab>

                <p:tab title="ChartBean.java">
            <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import org.primefaces.model.chart.BubbleChartModel;
import org.primefaces.model.chart.BubbleCharSeries;

public class ChartBean implements Serializable { 

    private BubbleChartModel bubbleModel;

    public ChartBean() {
        createBubbleModel();
    }

    private void createBubbleModel() {
        bubbleModel = new BubbleChartModel();

        bubbleModel.addBubble(new BubbleChartSeries("Acura", 70, 183,55));
        bubbleModel.addBubble(new BubbleChartSeries("Alfa Romeo", 45, 92, 36));
        bubbleModel.addBubble(new BubbleChartSeries("AM General", 24, 104, 40));
        bubbleModel.addBubble(new BubbleChartSeries("Bugatti", 50, 123, 60));
        bubbleModel.addBubble(new BubbleChartSeries("BMW", 15, 89, 25));
        bubbleModel.addBubble(new BubbleChartSeries("Audi", 40, 180, 80));
        bubbleModel.addBubble(new BubbleChartSeries("Aston Martin", 70, 70, 48));
    }
}
            </pre>
                </p:tab>
            </p:tabView>
        </div>
    </ui:define>
</ui:composition>
